<template>
  <el-container>
    <el-header>
      <el-menu mode="horizontal">
        <el-menu-item index="sign-up" v-if="logged == false">
            <router-link to="/sign/up">用户注册</router-link>
        </el-menu-item>
        <el-menu-item index="sign-in" v-if="!logged">
            <router-link to="/sign/in">用户登录</router-link>
        </el-menu-item>
        <el-menu-item index="sign-out" v-if="logged == true">
            <router-link to="/sign/out">用户注销</router-link>
        </el-menu-item>
        <el-menu-item index="book-add" v-if="logged">
            <router-link to="/book/add">新增图书</router-link>
        </el-menu-item>
        <el-menu-item index="book-list">
            <router-link to="/book/list">图书列表</router-link>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <!-- 路由出口 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'App' ,
  data(){
    return {
      // true 表示已经登录， false 表示未登录
      logged: false
    }
  }
}
</script>

<style>
</style>
